<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        a {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <a href="pro_list.html">返回</a>
        <h2>编辑商品</h2>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="form.stock"></el-input>
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: {
                        id: '',
                        name: '',
                        price: '',
                        stock: '',
                        description: ''
                    }
                }
            },
            created() {
                // 获取 URL 中的 id 参数
                const urlParams = new URLSearchParams(window.location.search);
                this.form.id = urlParams.get('id');
                // 获取商品信息
                axios.get('/product/pro_query?id=' + this.form.id)
                   .then(response => {
                        this.form.name = response.data.name;
                        this.form.price = response.data.price;
                        this.form.stock = response.data.stock;
                        this.form.description = response.data.description;
                    })
                   .catch(error => {
                        console.log(error);
                    });
            },
            methods: {
                submit() {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            axios.put('/product/pro_update?id=' + this.form.id, this.form)
                               .then(response => {
                                   if (response.data !== null ){
                                       this.$message.success('修改成功');
                                       window.location.href = 'pro_list.html';
                                   }else{
                                       this.$message.error('修改失败');
                                   }
                                })
                               .catch(error => {
                                    console.log(error);
                                    this.$message.error('修改失败');
                                });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }
            }
        })
    </script>
</body>
</html>